<template>
    <div class="edit-popup">
        <popup
            ref="popupRef"
            :title="popupTitle"
            :async="true"
            width="950px"
            :clickModalClose="true"
            @confirm="handleSubmit"
            @close="handleClose"
        >
            <el-form
                ref="formRef"
                :model="formData"
                label-width="138px"
                :rules="formRules"
                :inline="true"
            >
                <el-form-item label="客户名称" prop="customerName">
                    <el-input
                        class="w-[285px]"
                        v-model="formData.customerName"
                        placeholder="请输入客户名称"
                    />
                </el-form-item>
                <el-form-item label="发文类型" prop="documentType">
                    <el-select
                        class="flex-1 w-[285px]"
                        v-model="formData.documentType"
                        placeholder="请选择发文类型"
                    >
                        <el-option label="发明专利申请公布通知书" value="1" />
                        <el-option label="手续合格通知书" value="2" />
                        <el-option label="电子申请回执单" value="3" />
                    </el-select>
                </el-form-item>
                <el-form-item label="案件类型" prop="caseType">
                    <el-checkbox-group
                        class="w-[740px]"
                        v-model="formData.caseType"
                        placeholder="请选择案件类型"
                    >
                        <el-checkbox label="专利" value="1"></el-checkbox>
                        <el-checkbox label="商标" value="2"></el-checkbox>
                        <el-checkbox label="版权" value="3"></el-checkbox>
                        <el-checkbox label="科技服务" value="4"></el-checkbox>
                        <el-checkbox label="法律案件" value="5"></el-checkbox>
                        <el-checkbox label="调查案" value="6"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="收件人" prop="recipients">
                    <div>
                        <el-input class="w-[740px]" placeholder="请输入固定邮箱" />
                    </div>
                    <el-checkbox-group v-model="formData.recipients" placeholder="请选择收件人">
                        <el-checkbox label="发明人" value="1"></el-checkbox>
                        <el-checkbox label="客户联系人" value="2"></el-checkbox>
                        <el-checkbox label="代理机构联系人" value="3"></el-checkbox>
                        <el-checkbox label="业务人员" value="4"></el-checkbox>
                        <el-checkbox label="业务助理" value="5"></el-checkbox>
                        <el-checkbox label="客户业务员" value="6"></el-checkbox>
                        <el-checkbox label="技术联系人" value="7"></el-checkbox>
                        <el-checkbox label="客户流程人员" value="8"></el-checkbox>
                        <el-checkbox label="其他" value="9"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="抄送" prop="copy">
                    <div>
                        <el-input class="w-[740px]" placeholder="请输入固定邮箱" />
                    </div>
                    <el-checkbox-group v-model="formData.copy" placeholder="请选择抄送">
                        <el-checkbox label="发明人" value="1"></el-checkbox>
                        <el-checkbox label="客户联系人" value="2"></el-checkbox>
                        <el-checkbox label="代理机构联系人" value="3"></el-checkbox>
                        <el-checkbox label="业务人员" value="4"></el-checkbox>
                        <el-checkbox label="业务助理" value="5"></el-checkbox>
                        <el-checkbox label="客户业务员" value="6"></el-checkbox>
                        <el-checkbox label="技术联系人" value="7"></el-checkbox>
                        <el-checkbox label="客户流程人员" value="8"></el-checkbox>
                        <el-checkbox label="其他" value="9"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="密送" prop="blindCarbonCopy">
                    <div>
                        <el-input class="w-[740px]" placeholder="请输入固定邮箱" />
                    </div>
                    <el-checkbox-group v-model="formData.blindCarbonCopy" placeholder="请选择密送">
                        <el-checkbox label="发明人" value="1"></el-checkbox>
                        <el-checkbox label="客户联系人" value="2"></el-checkbox>
                        <el-checkbox label="代理机构联系人" value="3"></el-checkbox>
                        <el-checkbox label="业务人员" value="4"></el-checkbox>
                        <el-checkbox label="业务助理" value="5"></el-checkbox>
                        <el-checkbox label="客户业务员" value="6"></el-checkbox>
                        <el-checkbox label="技术联系人" value="7"></el-checkbox>
                        <el-checkbox label="客户流程人员" value="8"></el-checkbox>
                        <el-checkbox label="其他" value="9"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="主题" prop="theme">
                    <el-select
                        v-model="formData.theme"
                        placeholder="请选择主题"
                        class="flex-1 w-[740px]"
                        clearable
                        multiple
                    >
                        <template #label="{ label, value }">
                            <span>{{ label }}: </span>
                            <span style="font-weight: bold">{{ value }}</span>
                        </template>
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="文件命名类型" prop="fileDesignationType">
                    <el-select
                        class="flex-1 w-[740px]"
                        v-model="formData.fileDesignationType"
                        placeholder="请选择文件命名类型"
                    >
                        <el-option label="我方文号" value="1" />
                        <el-option label="客户文号" value="2" />
                        <el-option label="代理机构代码" value="3" />
                    </el-select>
                </el-form-item>
                <el-form-item label="内容模板" prop="describe" class="checkboxs">
                    <div>
                        <span>基本信息：</span>
                        <el-checkbox-group v-model="formData.Type" placeholder="请选择案件类型">
                            <el-checkbox label="我方案号" value="1"></el-checkbox>
                            <el-checkbox label="贵方案号" value="2"></el-checkbox>
                            <el-checkbox label="案件备注" value="3"></el-checkbox>
                            <el-checkbox label="申请号" value="4"></el-checkbox>
                            <el-checkbox label="申请日" value="5"></el-checkbox>
                            <el-checkbox label="发明名称" value="6"></el-checkbox>
                            <el-checkbox label="公开号" value="7"></el-checkbox>
                            <el-checkbox label="公开日" value="8"></el-checkbox>
                            <el-checkbox label="公告号" value="9"></el-checkbox>
                            <el-checkbox label="业务员" value="10"></el-checkbox>
                        </el-checkbox-group>
                    </div>

                    <div>
                        <span>扩展信息：</span>
                        <el-checkbox-group v-model="formData.external" placeholder="请选择案件类型">
                            <el-checkbox label="专利标签" value="1"></el-checkbox>
                            <el-checkbox label="办登费期限" value="2"></el-checkbox>
                            <el-checkbox label="马德里申请日" value="3"></el-checkbox>
                            <el-checkbox label="马德里申请号" value="4"></el-checkbox>
                            <el-checkbox label="马德里注册号" value="5"></el-checkbox>
                            <el-checkbox label="预计返稿日期" value="6"></el-checkbox>
                            <el-checkbox label="国内案件申请号" value="7"></el-checkbox>
                            <el-checkbox label="公开日" value="8"></el-checkbox>
                            <el-checkbox label="公告号" value="9"></el-checkbox>
                            <el-checkbox label="业务员" value="10"></el-checkbox>
                        </el-checkbox-group>
                    </div>

                    <div>
                        <span>著录项目：</span>
                        <el-checkbox-group
                            v-model="formData.authorcatalog"
                            placeholder="请选择案件类型"
                        >
                            <el-checkbox label="我方案号" value="1"></el-checkbox>
                            <el-checkbox label="贵方案号" value="2"></el-checkbox>
                            <el-checkbox label="案件备注" value="3"></el-checkbox>
                            <el-checkbox label="申请号" value="4"></el-checkbox>
                            <el-checkbox label="申请日" value="5"></el-checkbox>
                            <el-checkbox label="发明名称" value="6"></el-checkbox>
                            <el-checkbox label="公开号" value="7"></el-checkbox>
                            <el-checkbox label="公开日" value="8"></el-checkbox>
                            <el-checkbox label="公告号" value="9"></el-checkbox>
                            <el-checkbox label="业务员" value="10"></el-checkbox>
                        </el-checkbox-group>
                    </div>

                    <div>
                        <span>处理事项：</span>
                        <el-checkbox-group v-model="formData.handling" placeholder="请选择案件类型">
                            <el-checkbox label="我方案号" value="1"></el-checkbox>
                            <el-checkbox label="贵方案号" value="2"></el-checkbox>
                            <el-checkbox label="案件备注" value="3"></el-checkbox>
                            <el-checkbox label="申请号" value="4"></el-checkbox>
                            <el-checkbox label="申请日" value="5"></el-checkbox>
                            <el-checkbox label="发明名称" value="6"></el-checkbox>
                            <el-checkbox label="公开号" value="7"></el-checkbox>
                            <el-checkbox label="公开日" value="8"></el-checkbox>
                            <el-checkbox label="公告号" value="9"></el-checkbox>
                            <el-checkbox label="业务员" value="10"></el-checkbox>
                        </el-checkbox-group>
                    </div>

                    <div>
                        <span>文件信息：</span>
                        <el-checkbox-group v-model="formData.file" placeholder="请选择案件类型">
                            <el-checkbox label="文件名称" value="1"></el-checkbox>
                            <el-checkbox label="发文日期" value="2"></el-checkbox>
                            <el-checkbox label="文件描述" value="3"></el-checkbox>
                            <el-checkbox label="2222" value="4"></el-checkbox>
                            <el-checkbox label="发文日+3个月" value="5"></el-checkbox>
                            <el-checkbox label="发文日+4个月" value="6"></el-checkbox>
                        </el-checkbox-group>
                    </div>

                    <div>
                        <span>费用信息：</span>
                        <el-checkbox-group v-model="formData.expense" placeholder="请选择">
                            <el-checkbox label="年登费" value="1"></el-checkbox>
                            <el-checkbox label="年登代理费" value="2"></el-checkbox>
                            <el-checkbox label="年登费用总计" value="3"></el-checkbox>
                            <el-checkbox label="是否请求费用减缓" value="4"></el-checkbox>
                            <el-checkbox label="年费金额" value="5"></el-checkbox>
                            <el-checkbox label="代理费" value="6"></el-checkbox>
                            <el-checkbox label="年费代理费" value="7"></el-checkbox>
                            <el-checkbox label="年费阶段" value="8"></el-checkbox>
                        </el-checkbox-group>
                    </div>
                </el-form-item>
                <el-form-item label=" " prop="describe">
                    <editor v-model="formData.describe" height="500px" />
                </el-form-item>
            </el-form>
        </popup>
    </div>
</template>
<script lang="ts" setup>
import type { FormInstance } from 'element-plus'
import {
    dispatchruleconfigurationEdit,
    dispatchruleconfigurationAdd,
    dispatchruleconfigurationDetail
} from '@/api/dispatchruleconfiguration'
import Popup from '@/components/popup/index.vue'
import feedback from '@/utils/feedback'
import type { PropType } from 'vue'
defineProps({
    dictData: {
        type: Object as PropType<Record<string, any[]>>,
        default: () => ({})
    }
})
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')
const popupTitle = computed(() => {
    return mode.value == 'edit' ? '编辑发文规则' : '添加规则'
})

const formData = reactive({
    id: '',
    customerName: '',
    blindCarbonCopy: [],
    caseType: [],
    documentType: '',
    themeId: '',
    theme: [],
    recipientsId: '',
    recipients: [],
    copy: [],
    fileDesignationType: []
})
const theme = ref<string[]>(['Option1'])
const fileDesignationType = ref<string[]>(['Option1'])
const options = [
    {
        value: '1',
        label: '我方文号'
    },
    {
        value: '2',
        label: '客户文号'
    },
    {
        value: '3',
        label: '代理机构代码'
    }
]
const formRules = {}

const handleSubmit = async () => {
    await formRef.value?.validate()
    const data: any = { ...formData }
    data.blindCarbonCopy = data.blindCarbonCopy.join(',')
    data.caseType = data.caseType.join(',')
    data.recipients = data.recipients.join(',')
    data.copy = data.copy.join(',')
    mode.value == 'edit'
        ? await dispatchruleconfigurationEdit(data)
        : await dispatchruleconfigurationAdd(data)
    popupRef.value?.close()
    feedback.msgSuccess('操作成功')
    emit('success')
}

const open = (type = 'add') => {
    mode.value = type
    popupRef.value?.open()
}

const setFormData = async (data: Record<string, any>) => {
    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData[key] = data[key]
            //@ts-ignore
            formData.blindCarbonCopy = String(data.blindCarbonCopy).split(',')
            //@ts-ignore
            formData.caseType = String(data.caseType).split(',')
            //@ts-ignore
            formData.recipients = String(data.recipients).split(',')
            //@ts-ignore
            formData.copy = String(data.copy).split(',')
        }
    }
}

const getDetail = async (row: Record<string, any>) => {
    const data = await dispatchruleconfigurationDetail({
        id: row.id
    })
    setFormData(data)
}

const handleClose = () => {
    emit('close')
}

defineExpose({
    open,
    setFormData,
    getDetail
})
</script>
<style scoped>
.checkboxs .el-checkbox-group .el-checkbox {
    width: 140px;
    background-color: gainsboro;
    margin: 5px;
    padding-right: 2px;
    border: 2px solid gainsboro;
    border-radius: 5px;
    justify-content: center;
}
</style>
